<html>
<head>
  <style>
  
    popup#test
    {
      background-color: orange;
      border:1dip solid red;
      width:100dip;
      height:100dip;
      cursor:pointer;
    }
    div#anchor
    {
      behavior: button;    
      border:1dip solid blue;
      width:50dip;
      height:50dip;
      cursor:pointer;
      aspect: PopupTrigger;
    }

  </style>  
  <style #actions>
    div#anchor
    {
      behavior: button; 
    }
  </style>    
  <script type="text/tiscript">
    
    function PopupTrigger() {
      var popup;
      if( var popupSelector = this.attributes["popup"] )
        popup = self.select(popupSelector);
      if( !popup )
        popup = this.select("popup");
      
      assert popup : "PopupTrigger: popup not found";
      
      var popupShown = false;
      var me = this;
      
      this << event click (evt) {
        if( !evt.target.belongsTo(this,false,true) )
          return false;
        if(popupShown)
          popup.state.popup = false;
        else
          this.popup(popup);
      }
     
      popup << event popupready { popupShown = true; }
            << event popupdismissing { me.timer(500ms, ::popupShown = false); };

    } 
      
    </script>
  
</head>
<body>

   <p>Second click on the anchor closes the popup:</p>
    <div#anchor popup="#test" title="hello"> 
      anchor
    </div>
    
    <popup #test>
      popup
    </popup>
    

</body>
</html>